<template>
  <div>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="futuresForm"
        :model="futuresForm"
        label-width="85px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="交易所">
               <el-select  clearable v-model="futuresForm.exchangeid" placeholder="请选择" filterable allow-create @change="handle_productid">
			            <el-option label="中国金融交易所" value="CFFEX"></el-option>
                  <el-option label="郑州商品交易所" value="CZCE"></el-option>
                  <el-option label="大连商品交易所" value="DCE"></el-option>
                  <el-option label="上海国际能源交易中心" value="INE"></el-option>
                  <el-option label="上海期货交易所" value="SHFE"></el-option>
			        </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="2">
          <el-button type="primary" size="small" @click="handle_futures" style='margin-top:3px;'>
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="small" @click="add_overoption">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="small" @click="edit_overoption">
        <d2-icon name="edit" />
        修改
      </el-button>
      <el-button type="default" size="small" icon="el-icon-delete" @click="del_overoption">
        删除
      </el-button>
      <!-- <el-button type="default" size="small" @click="examine">
        <d2-icon name="search" />
        查看
      </el-button> -->
       <el-upload
            class="upload-btn"
            :action="uploadUrl"
            accept=".xls, .xlsx"
            :on-success="handleAvatarSuccess"
            :on-progress="uploadProgress"
            :on-error="handleUploadError"
            :show-file-list="false" style="display:inline-block;margin:0 10px;">
          <el-button type="default" size="small">
            <d2-icon name="download" />
            导入
          </el-button>
          </el-upload>
      <el-button type="default" size="small" @click="handleFormSubmit">
        <d2-icon name="upload" />
        导出
      </el-button>
      <!-- <el-button type="default" size="small" @click="add">
        <d2-icon name="unlock" />
        启用
      </el-button>
      <el-button type="default" size="small" @click="add">
        <d2-icon name="unlock-alt" />
        停用
      </el-button> -->
      <el-button
        type="default"
        size="small"
        @click="RefreshCurrent"
      >
        <d2-icon name="refresh" />
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="overoptiontableData"
        border :header-cell-style="{ background: '#eef1f6' }"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" label="序号" sortable width="75"></el-table-column>
        <el-table-column prop="exchangeid" label="交易所代码" width="100"></el-table-column>
        <el-table-column prop="productname" label="品种"></el-table-column>
        <el-table-column prop="instrumentid" label="合约代码"></el-table-column>
        <el-table-column prop="instrumentname" label="合约名称"></el-table-column>
        <el-table-column prop="productclass" label="期权组合" :formatter="formatzh"></el-table-column>
        <el-table-column prop="volumemultiple" label="合约数量乘数" width="105"></el-table-column>
        <el-table-column prop="opendate" label="上市日" sortable width="110"></el-table-column>
        <el-table-column prop="expiredate" label="到期日" sortable width="110"></el-table-column>
         <el-table-column prop="startdelivdate" label="开始交割日" sortable width="115"></el-table-column>
        <el-table-column prop="enddelivdate" label="结束交割日" sortable width="115"></el-table-column>
         <el-table-column prop="underlyinginstrid" label="标的合约"></el-table-column>
        <el-table-column prop="priceunit" label="单位"></el-table-column>
        <el-table-column prop="strikeprice" label="执行价"></el-table-column>
        <el-table-column prop="optionstype" label="期权类型" :formatter="formatteroptionstype"></el-table-column>
      </el-table>
    </el-card>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="futuresForm.page"
      :page-size="futuresForm.pageSize"
      layout="total, prev, pager, next"
      :total="futuresForm.totalPage"
    >
    </el-pagination>
     <!-- 新增 -->
    <el-dialog :visible.sync="add_overoptionVisible" title="衍生品信息-场外期权信息-新增" width="90%">
      <div>
    <div class="mb">
       <el-button type="default" size="small" @click="addRow">
        <d2-icon name="plus"/>
        增行
      </el-button>
      <el-button type="default" size="small" icon="el-icon-delete" @click="delData">
        删行
      </el-button>
    </div>
    <el-form label-position="right" status-icon :rules="rules" :model="add_overoptiontableData" ref="ruleForm">
    <el-table :data="add_overoptiontableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" :row-class-name="tableRow"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" @selection-change='selectRow' highlight-current-row>
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column type="index" label="序号" sortable width="75">
      </el-table-column>
       <el-table-column label="交易所" width="165">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.exchangeid'" :rules="rules.exchangeid">
          <el-select  clearable v-model="scope.row.exchangeid" placeholder="请选择" filterable allow-create @change="handle_productid1(scope.row.exchangeid)">
			            <el-option label="中国金融交易所" value="CFFEX"></el-option>
                  <el-option label="郑州商品交易所" value="CZCE"></el-option>
                  <el-option label="大连商品交易所" value="DCE"></el-option>
                  <el-option label="上海国际能源交易中心" value="INE"></el-option>
                  <el-option label="上海期货交易所" value="SHFE"></el-option>
			        </el-select>
           </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="品种" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.productid'" :rules="rules.productid">
            <el-select v-model="scope.row.productid" placeholder="请选择" style="width:100%;" @change="handle_instrument(scope.row.productid)">
              <el-option v-for="item in productidList" :key="item.productid" :label="item.ProductName" :value="item.productid"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="合约代码" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.instrumentid'" :rules="rules.instrumentid">
          <!-- <el-select  clearable v-model="scope.row.instrumentid" value-key="instrumentid" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in instrumentidList"
                  :key="item.instrumentid"
                  :label="item.InstrumentName"
                  :value="item.instrumentid"
                >
                </el-option>
              </el-select> -->
              <el-input
            placeholder="请输入内容"
            v-model="scope.row.instrumentid"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="合约名称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.instrumentname'" :rules="rules.instrumentname">
              <el-input
            placeholder="请输入内容"
            v-model="scope.row.instrumentname"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="期权组合" width="130">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.productclass'" :rules="rules.productclass">
          <el-select  clearable v-model="scope.row.productclass" placeholder="请选择" filterable allow-create>
			            <el-option label="单腿期权" value="10"></el-option>
                  <el-option label="期权组合" value="11"></el-option>
			        </el-select>
              </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="合约数量乘数" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.volumemultiple'" :rules="rules.volumemultiple">
          <el-input
            placeholder="请输入内容"
            type="number"
            v-model="scope.row.volumemultiple"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="opendate" label="上市日" sortable width="160">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.opendate'" :rules="rules.opendate">
          <el-date-picker
           style="width:100%"
      v-model="scope.row.opendate"
      type="date"
       value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
    </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="到期日" sortable width="160">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.expiredate'" :rules="rules.expiredate">
          <el-date-picker
          style="width:100%"
      v-model="scope.row.expiredate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="开始交割日" sortable width="160">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.startdelivdate'" :rules="rules.startdelivdate">
           <el-date-picker
           style="width:100%"
      v-model="scope.row.startdelivdate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
       <!-- :readonly="scope.row.productclass == '10'" -->
      <el-table-column prop="amount_1" label="结束交割日" sortable width="160">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.enddelivdate'" :rules="rules.enddelivdate">
          <el-date-picker
          style="width:100%"
      v-model="scope.row.enddelivdate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="标的合约" width="100">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.underlyinginstrid'" :rules="rules.underlyinginstrid">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.underlyinginstrid"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="执行价" width="100">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.strikeprice'" :rules="rules.strikeprice">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.strikeprice"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="期权类型" width="100">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.optionstype'" :rules="rules.optionstype">
          <el-select  clearable v-model="scope.row.optionstype" placeholder="请选择" filterable allow-create>
			            <el-option label="看涨" value="1"></el-option>
                  <el-option label="看跌" value="2"></el-option>
			        </el-select>
          </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="单位" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.priceunit'" :rules="rules.priceunit">
          <el-select  clearable v-model="scope.row.priceunit" value-key="priceunit" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in priceUnitList"
                  :key="item.priceunit"
                  :label="item.priceunit"
                  :value="item.priceunit"
                >
                </el-option>
              </el-select>
          </el-form-item>
        </template>
      </el-table-column>
         <!-- <el-table-column prop="seller" label="合约基础商品乘数" sortable>
        <template slot-scope="scope">
          <el-input
            placeholder="请输入内容"
            type="number"
            v-model="scope.row.underlyingmultiple"
          ></el-input>
        </template>
        </el-table-column> -->
     </el-table>
    </el-form>
      </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="add_overoptionVisible = false">取消</el-button>
        <el-button type="primary" @click="handel_add_overoption('ruleForm')"
          >保存</el-button
        >
      </span>
    </el-dialog>
     <!-- 修改 -->
    <el-dialog :visible.sync="edit_overoptionVisible" title="衍生品信息-场外期权信息-修改" width="90%">
      <div>
        <el-form label-position="right" status-icon :rules="rules" :model="edit_overoptiontableData" ref="ruleForm">
    <el-table :data="edit_overoptiontableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" :row-class-name="tableRow"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" @selection-change='selectRow' highlight-current-row>
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column type="index" label="序号" sortable width="75">
      </el-table-column>
       <el-table-column label="交易所" width="165">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.exchangeid'" :rules="rules.exchangeid">
          <el-select  clearable v-model="scope.row.exchangeid" placeholder="请选择" filterable allow-create @change="handle_productid1(scope.row.space_type,scope.row.exchangeid)">
			            <el-option label="中国金融交易所" value="CFFEX"></el-option>
                  <el-option label="郑州商品交易所" value="CZCE"></el-option>
                  <el-option label="大连商品交易所" value="DCE"></el-option>
                  <el-option label="上海国际能源交易中心" value="INE"></el-option>
                  <el-option label="上海期货交易所" value="SHFE"></el-option>
			        </el-select>
           </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="品种" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.productid'" :rules="rules.productid">
            <el-select v-model="scope.row.productid" placeholder="请选择" style="width:100%;" @change="handle_instrument(scope.row.space_type,scope.row.productid)">
              <el-option v-for="item in productidList" :key="item.productid" :label="item.ProductName" :value="item.productid"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="合约代码" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.instrumentid'" :rules="rules.instrumentid">
          <!-- <el-select  clearable v-model="scope.row.instrumentid" value-key="instrumentid" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in instrumentidList"
                  :key="item.instrumentid"
                  :label="item.InstrumentName"
                  :value="item.instrumentid"
                >
                </el-option>
              </el-select> -->
              <el-input
            placeholder="请输入内容"
            v-model="scope.row.instrumentid"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
       <el-table-column label="合约名称" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.instrumentname'" :rules="rules.instrumentname">
              <el-input
            placeholder="请输入内容"
            v-model="scope.row.instrumentname"
          ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="期权组合" width="130">
        <template slot-scope="scope">
          <el-select  clearable v-model="scope.row.productclass" placeholder="请选择" filterable allow-create>
			            <el-option label="单腿期权" value="10"></el-option>
                  <el-option label="期权组合" value="11"></el-option>
			        </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="合约数量乘数" width="150">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入内容"
            type="number"
            v-model="scope.row.volumemultiple"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="opendate" label="上市日" sortable width="160">
        <template slot-scope="scope">
          <el-date-picker
           style="width:100%"
      v-model="scope.row.opendate"
      type="date"
       value-format="yyyy-MM-dd"
      placeholder="选择日期">
    </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="到期日" sortable width="160">
        <template slot-scope="scope">
          <el-date-picker
           style="width:100%"
      v-model="scope.row.expiredate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="sign" label="开始交割日" sortable width="160">
        <template slot-scope="scope">
           <el-date-picker
            style="width:100%"
      v-model="scope.row.startdelivdate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="amount_1" label="结束交割日" sortable width="160">
        <template slot-scope="scope">
          <el-date-picker
           style="width:100%"
      v-model="scope.row.enddelivdate"
       value-format="yyyy-MM-dd"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="标的合约" width="100">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.underlyinginstrid"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="seller" label="执行价" width="100">
        <template slot-scope="scope">
          <el-input
            placeholder="请输入内容"
            v-model="scope.row.strikeprice"
          ></el-input>
        </template>
        </el-table-column>
         <el-table-column prop="seller" label="期权类型" width="100">
        <template slot-scope="scope">
          <el-select  clearable v-model="scope.row.optionstype" placeholder="请选择" filterable allow-create>
			            <el-option label="看涨" value="1"></el-option>
                  <el-option label="看跌" value="2"></el-option>
			        </el-select>
        </template>
        </el-table-column>
         <el-table-column label="单位" width="150">
        <template slot-scope="scope">
          <el-form-item :prop="scope.$index + '.priceunit'" :rules="rules.priceunit">
          <el-select  clearable v-model="scope.row.priceunit" value-key="priceunit" placeholder="请选择" style="width:100%;">
                <el-option
                  v-for="item in priceUnitList"
                  :key="item.priceunit"
                  :label="item.priceunit"
                  :value="item.priceunit"
                >
                </el-option>
              </el-select>
          </el-form-item>
        </template>
      </el-table-column>
         <!-- <el-table-column prop="seller" label="合约基础商品乘数" sortable>
        <template slot-scope="scope">
          <el-input
            placeholder="请输入内容"
            type="number"
            v-model="scope.row.underlyingmultiple"
          ></el-input>
        </template>
        </el-table-column> -->
        </el-table>
        </el-form>
      </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="edit_overoptionVisible = false">取消</el-button>
        <el-button type="primary" @click="handel_edit_overoption"
          >保存</el-button
        >
      </span>
    </el-dialog>
     <!-- 导入 -->
    <el-dialog :visible.sync="droveroptionVisible" title="导入衍生品信息-场外期权信息" width="90%">
      <div>
    <el-table :data="droveroptiontableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" :row-class-name="tableRow"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center' }" @selection-change='selectRow' highlight-current-row>
      <el-table-column type="index" label="序号">
      </el-table-column>
      <el-table-column prop="exchangeid" label="交易所代码" sortable>
      </el-table-column>
      <el-table-column prop="instrumentid" label="合约代码" sortable>
      </el-table-column>
       <el-table-column prop="instrumentname" label="合约名称" sortable>
      </el-table-column>
       <el-table-column prop="productid" label="品种" sortable>
      </el-table-column>
      <el-table-column prop="productclass" label="期权组合" sortable>
      </el-table-column>
      <el-table-column prop="volumemultiple" label="合约数量乘数" sortable>
      </el-table-column>
      <el-table-column prop="opendate" label="上市日" sortable>
      </el-table-column>
      <el-table-column prop="expiredate" label="到期日" sortable>
      </el-table-column>
      <el-table-column prop="startdelivdate" label="开始交割日" sortable>
      </el-table-column>
      <el-table-column prop="enddelivdate" label="结束交割日" sortable>
      </el-table-column>
      <el-table-column prop="underlyinginstrid" label="标的合约" sortable>
      </el-table-column>
      <el-table-column prop="strikeprice" label="执行价" sortable>
      </el-table-column>
       <el-table-column prop="optionstype" label="期权类型" sortable>
      </el-table-column>
       <el-table-column prop="underlyingmultiple" label="合约基础商品乘数" sortable>
      </el-table-column>
      </el-table>
      </div>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="droveroptionVisible = false">取消</el-button>
        <el-button type="primary" @click="droveroption"
          >导入数据</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import index from '@/components/PageFooter/index.vue';
import { coninstrumentinfo, addinstrumentinfo, coninstrumentid, conCommodity } from '../../../../../api/url_lcc';
export default {
  components: { index },
  //衍生品信息-场外期权信息
  name: "OvarianoptionInformation",
  data() {
    return {
      productidList:[],
      instrumentidList:[],
       // 导入
      uploadUrl:`/user/lead/`,
      droveroptionVisible:false,
      droveroptiontableData:[],
      add_overoptionVisible: false,
      edit_overoptionVisible: false,
      add_overoptiontableData:[],
      futuresForm: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        productid: "",
        exchangeid: "",
        productclass: "10,11",
        instrumentid:  "",
      },
      exchangeidList:[],
      productclassList:[],
      edit_overoptiontableData:[],
      page: {
        pageCurrent: 1,
        pageSize: 10,
        pageTotal: 0
      },
     overoptiontableData:[],
     ruleForm:{
            exchangeid:"",
            instrumentid: "",
            priceunit:"",
            instrumentname: "",
            productid: "",
            productclass: "",
            volumemultiple: "",
            opendate: "",
            expiredate: "",
            startdelivdate: "",
            underlyinginstrid: "",
            strikeprice: "",
            optionstype: "",
      },
      rules:{
        exchangeid: [
            { required: true, message: '请选择交易所代码', trigger: 'change' }
          ],
        instrumentid: [
            { required: true, message: '请输入合约代码', trigger: 'blur' },
          ],
        instrumentname: [
         { required: true, message: '请输入合约名称', trigger: 'blur' },
       ],
       productid: [
            { required: true, message: '请输入品种', trigger: 'blur' }
          ],
       productclass: [
            { required: true, message: '请选择期权组合', trigger: 'change' }
          ],
       volumemultiple: [
         { required: true, message: '请输入合约数量乘数', trigger: 'blur' },
       ], 
       opendate: [
          { required: true, message: '请选择上市日', trigger: 'change' }
        ],
       expiredate: [
          { required: true, message: '请选择到期日', trigger: 'change' }
        ],
       startdelivdate: [
          { required: true, message: '请选择开始交割日', trigger: 'change' }
        ],
       underlyinginstrid: [
         { required: true, message: '请输入标的合约', trigger: 'blur' },
       ], 
       strikeprice: [
         { required: true, message: '请输入执行价', trigger: 'blur' },
       ], 
       optionstype: [
            { required: true, message: '请选择期权类型', trigger: 'change' }
       ],
       PriceUnit: [
            { required: true, message: '请选择单位', trigger: 'change' }
       ],
      },
    };
  },
  methods: {
     // 导入
      handleAvatarSuccess (res, file) {
        // this.uploadloading.close();
        console.log(444444,res.result);
        if (res && res.errcode === "1") {
           this.$message({
           message: '导入成功',
           type: 'success',
          })
          this.droveroptionVisible = true;
          this.droveroptiontableData = [];
          var data1 = res.result.Sheet1;
          for (var i = 0; i < data1.length; i++) {
            this.droveroptiontableData[i] = {
              exchangeid: data1[i].交易所代码,
              instrumentid: data1[i].合约代码,
              instrumentname: data1[i].合约名称,
              productid: data1[i].品种,
              productclass: data1[i].期权组合,
              volumemultiple: data1[i].合约数量乘数,
              opendate: data1[i].上市日,
              expiredate: data1[i].到期日,
              startdelivdate: data1[i].开始交割日,
              enddelivdate: data1[i].结束交割日,
              underlyinginstrid: data1[i].标的合约,
              strikeprice: data1[i].执行价,
              optionstype: data1[i].期权类型,
              underlyingmultiple: data1[i].合约基础商品乘数
            }
          }
         
        } else {
          this.$message.error(res.msg);
        }
      },
      droveroption(){
         var droveroptiontableData = [];
        var droveroptiontableData = this.droveroptiontableData;
        droveroptiontableData.forEach(function(item, index) {
           var data1 = item.exchangeid
           var data2 = item.productclass
           var data3 = item.optionstype
          if (data2 == "单腿期权") {
             item.productclass = '10';
         } else if (data2 == "期权组合") {
             item.productclass = '11';
         }
          if (data1 == "中国金融交易所") {
             item.exchangeid = 'CFFEX';
         } else if (data1 == "郑州商品交易所") {
             item.exchangeid = 'CZCE';
         } else if (data1 == "大连商品交易所") {
             item.exchangeid = 'DCE';
         } else if (data1 == "上海国际能源交易中心") {
             item.exchangeid = 'INE';
         } else if (data1 == "上海期货交易所") {
             item.exchangeid = 'SHFE';
         }
           if (data3 == "看涨") {
             item.optionstype = '1';
         } else if (data3 == "看跌") {
             item.optionstype = '2';
         }
       })
        let params = { 
          "operation":"ADD",
          instrument_info:this.droveroptiontableData
        };
        addinstrumentinfo(params).then(res => {
            // if (res.errcode == "1") {
                this.$message.success(res.result);
                this.droveroptionVisible = false;
                this.handle_futures();
             }).catch(err =>{
          this.$message.error(err.msg);
        });
      },
      formatzh(row, column) {
         if (row.productclass == "10") {
             return '单腿期权';
         } else if (row.productclass == "11") {
             return '期权组合';
         }
     },
    // formatteroptionstype
     formatteroptionstype(row, column) {
         if (row.optionstype == "1") {
             return '看涨';
         } else if (row.optionstype == "2") {
             return '看跌';
         }
     },
    // 行内编辑
    handleCellDataChange({ rowIndex, key, value, row }) {
      console.log(rowIndex);
      console.log(key);
      console.log(value);
      console.log(row);
    },
    // 单选
    handleCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
     // 多选提示
    openMessage() {
      this.$message({
          dangerouslyUseHTMLString: true,
          type: 'error',
          message: '<strong>请勾选你要选择的行，再进行操作！</strong>'
      });
    },
    // 多选
    handleSelectionChange(val) {
       this.multipleSelection = val;
     },
      // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow () {
       	  var list = {
          rowNum:this.rowNum,
   		 };
        this.add_overoptiontableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
      delData() {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          val.forEach((val, index) => {
            this.add_overoptiontableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.add_overoptiontableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      },
       // 每页数
    handleSizeChange(val) {
      this.futuresForm.pageSize = val;
      this.futuresForm.page = 1;
     this.handle_futures();
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(val);
      this.futuresForm.page = val;
      this.handle_futures();
    },
    // 查询
    handle_futures(){
        coninstrumentinfo(this.futuresForm).then(res => {
            // if (res.errcode == "1") {
              this.overoptiontableData = []
               var data = res.result.results
               this.futuresForm.totalPage = res.result.count;
                for (var i = 0; i < data.length; i++) {
                  this.overoptiontableData[i] = {
                     "exchangeid": data[i].ExchangeID,
                     "productid": data[i].ProductID,
                     "opendate": data[i].OpenDate,    
                     "startdelivdate": data[i].StartDelivDate,
                     "strikeprice": data[i].StrikePrice,
                     "volumemultiple": data[i].VolumeMultiple,
                     "priceunit": data[i].PriceUnit,
                     "expiredate": data[i].ExpireDate,
                     "enddelivdate": data[i].EndDelivDate,
                     "instrumentid": data[i].InstrumentID,
                     "instrumentname": data[i].InstrumentName,
                     "productclass": data[i].ProductClass,
                     "underlyinginstrid": data[i].UnderlyingInstrID,
                     "optionstype": data[i].OptionsType,
                     "underlyingmultiple": data[i].UnderlyingMultiple,
                     "productname": data[i].ProductName,
                     "exchangename": data[i].ExchangeName,
                  }
              }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
    // 查询品种
      handle_productid1(value){
        let params = {
            exchangeid: value,
            productclass: "1",
            space_type: "2",
        };
        coninstrumentid(params).then(res => {
            // if (res.errcode == "1") {
              this.productidList = []
              var data1 = res.result
              for (var i = 0; i < data1.length; i++) {
                      this.productidList[i] = {
                          productid: data1[i]['ProductID'],
                          ProductName: data1[i]['ProductName']
                      };
                  }
            }).catch(err =>{
          this.$message.error(err.msg);
        });
      },
      // 查询合约
      handle_instrument(value){
       let params = {
            productid: value,
            space_type: "2",
        };
        coninstrumentid(params).then(res => {
            // if (res.errcode == "1") {
              this.instrumentidList = []
              var data1 = res.result
              for (var i = 0; i < data1.length; i++) {
                      this.instrumentidList[i] = {
                          instrumentid: data1[i]['InstrumentID'],
                          InstrumentName: data1[i]['InstrumentName']
                      };
                  }
             }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
     // 查询单位
      handle_unit(value){
        let params = {
        };
        coninstrumentid(params).then(res => {
              this.priceUnitList = []
              var data1 = res.result
              console.log('单位',data1)
              for (var i = 0; i < data1.length; i++) {
                      this.priceUnitList[i] = {
                          priceunit: data1[i]['PriceUnit']
                      };
                  }
            }).catch(err =>{
          this.$message.error(err.msg);
        });
      },
    // 新增
    add_overoption(){
        this.add_overoptionVisible = true;
    },
    // 新增保存
    handel_add_overoption(ruleForm){
         let params = {
            "operation":"ADD",
            "instrument_info": this.add_overoptiontableData,
        };
          const rule1 = new Promise((resolve, reject) => {
        this.$refs[ruleForm].validate(valid => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([rule1]).then(() => {
        addinstrumentinfo(params).then(res => {
            // if (res.errcode == "1") {
                this.$message.success(res.result);
                 this.add_overoptionVisible = false
                 this.handle_futures()
             }).catch(err =>{
          this.$message.error(err.msg);
        });
         });
    },
    // 修改
    edit_overoption(){
      console.log('修改',this.multipleSelection)
       if (this.multipleSelection == undefined) {
          this.openMessage();
      } else if(this.multipleSelection.length != 1){
         this.$message.error("修改只能选中一条数据进行！");
      } else {
         this.edit_overoptionVisible = true;
         this.edit_overoptiontableData = this.multipleSelection
      }
    },
    // 修改保存
     handel_edit_overoption(){
         let params = {
            "operation":"MOD",
            "instrument_info": this.edit_overoptiontableData[0],
        };
        addinstrumentinfo(params).then(res => {
            // if (res.errcode == "1") {
                this.$message.success(res.result);
                 this.edit_overoptionVisible = false
                 this.handle_futures()
             }).catch(err =>{
          this.$message.error(err.msg);
        });
    },
    // 删除
    del_overoption(){
         this.$confirm('是否删除该场外期权信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           var data = this.multipleSelection
           var currList  = [];
           data.forEach(function(item, index) {
              var data1 = item.instrumentid
              currList.push(data1)
              console.log(90,data1,91,currList)
          })
          let params = {
           "operation":"DEL",
           "instrument_info":currList
        };
        addinstrumentinfo(params).then(res => {
            // if (res.errcode == "1") {
                this.$message.success(res.result);
                 this.handle_futures()
              }).catch(err =>{
          this.$message.error(err.msg);
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 刷新
    RefreshCurrent(){
      // this.futuresForm.productid = "",
      // this.futuresForm.exchangeid = "",
      // this.futuresForm.instrumentid = "",
      this.handle_futures();
    }

  },
   mounted() {
      this.handle_futures();
      this.handle_unit();
  }
};
</script>
<style></style>
